<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Broadcast</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-slide.css" />
    <link rel="stylesheet" href="../css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/index.css">


</head>
<style media="screen">
    [v-cloak] {
        display: none;
    }
    .linh {
        background-image: url();
    }
</style>

<body style="background-color:rgb(249,249,251)">
    <section class="aui-content" style="width:95%;margin:auto;" id="TopActivity">
        <div class="van-notice-bar" @click="clicknotice()" style="margin-top:5px;margin-bottom:5px;background: #ffffff">
            <div class="van-notice-bar__left-icon"><img src="../icon/voice.png"></div>
            <div class="van-notice-bar__wrap">
                <div class="van-notice-bar__content van-notice-bar__play--infinite" style="padding-left: 310px; animation-delay: 0s; animation-duration: 10s;">{{textmsg}}</div>
            </div>
        </div>
        <div class="aui-card-list" v-cloak>
            <div class="aui-card-list-contient-padded">
                <div class="aui-content">
                    <ul class="aui-list aui-media-list">
                        <li class="aui-list-item" v-for="item in activities">
                            <div class="aui-media-list-item-inner">
                                <div class="aui-list-item-media" style="width:5rem;height:4.0rem" @click='changetoac($index)'>
                                    <img :src="item.imagearray[0]" width="100%" height="100%">
                                </div>
                                <div class="aui-list-item-inner">
                                    <div class="aui-list-item-text" @click='changetoac($index)'>
                                        <div class="aui-list-item-title">{{item.title}}</div>
                                        <!-- <div class="aui-list-item-right">{{item.time}}</div> -->
                                    </div>
                                    <div class="aui-list-item-text" @click='changetoac($index)' style="margin-bottom:0.2rem">

                                        <div class="aui-list-item-title" style="font-size: 0.7rem!important;color: #757575!important;">
                                            <span v-if="item.iftop!=null" style="display: inline-block; width:0.6rem;height:100%"><img
                                                    style="width:0.6rem" src="../icon/hot.png" alt=""> </span>{{item.type}}</div>
                                        <div class="aui-list-item-right" style="font-size:0.6rem!important">{{item.time}}</div>
                                    </div>
                                    <div class="aui-info" style="padding:0rem;padding-right:1rem;">
                                        <i v-if="item.praseif=='false'" class="fa fa-thumbs-o-up" aria-hidden="true"
                                            style="color:#757575" @click="prase($event,$index)">{{item.parsecount}}</i>
                                        <i v-else="item.praseif=='true'" class="fa fa-thumbs-o-up" aria-hidden="true"
                                            style="color:red" @click="prase($event,$index)">{{item.parsecount}}</i>
                                        <i v-if="item.storeif=='false'" class="fa fa-star-o" aria-hidden="true" style="left:3%;color:#757575"
                                            @click="store($event,$index)">{{item.storecount}}</i>
                                        <i v-else="item.storeif=='true'" class="fa fa-star-o" aria-hidden="true" style="left:3%;color:red"
                                            @click="store($event,$index)">{{item.storecount}}</i>
                                        <i class="fa fa-commenting-o" aria-hidden="true" style="left:5%" @click="comment($index)">
                                            {{item.commentcount}}</i>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/aui-slide.js"></script>
<script type="text/javascript" src="../script/vue1.0.js"></script>
<script type="text/javascript" src="../script/util.js"></script>
<script type="text/javascript" src="../script/vant.min.js"></script>
<script type="text/javascript">
    var imageList = [];
    var ptype = "";
    var stype = "";
    // var sclickcount = 0;
    var cclickcount = 0;
    var vm;
    apiready = function () {
        var user = api.getPrefs({
            key: 'user',
            sync: true
        });
        var USER = JSON.parse(user);

        var pclickcount = 0;
        var sclickcount = 0;
        var cclickcount = 0;
        topActivity = $api.byId('TopActivity');
        var h = api.winHeight / 3 - 5;
        $api.css(topActivity, 'margin-top:' + h + 'px;');
        vm = new Vue({
            el: "body",
            data: {
                activities: [],
                imageList: [],
                redif: [],
                commentcount: 0,
                textmsgs: [],
                textmsg: "",
                notice: [],
                count: 0,
                ifcount: 0,
                textindex: 0,
                length: 0,
            },
            methods: {
                clicknotice: function () {
                    var me = this;
                    console.log(me.textindex);
                    api.openWin({
                        name: 'noticedetail',
                        url: './noticedetail.html',
                        pageParam: {
                            index: me.textindex
                        }
                    });
                },
                changetoac: function (index) {
                    api.openWin({
                        name: 'ActivitiesDetails',
                        url: './activityList/ActivitiesDetails.html',
                        pageParam: {
                            index: index,
                            type: 1
                        }
                    });
                },

                //点赞
                prase: function (ev, index) {
                    var me = this;
                    if (ev.currentTarget.style.color != 'red') {
                        ev.currentTarget.style = "color:red";
                        ptype = "0";
                        api.ajax({
                            url: serverIp + '/friend/changepraseActivity.do',
                            method: 'post',
                            data: {
                                values: {
                                    type: ptype,
                                    activityoid: me.activities[index].oid,
                                }
                            }
                        }, function (ret, err) {
                            if (ret) {}
                        });
                        ptype = "1";
                        zancount = Number(me.activities[index].parsecount)
                        me.activities[index].parsecount = zancount + 1;
                    } else {
                        ev.currentTarget.style = "color:#757575";
                        ptype = "1";
                        api.ajax({
                            url: serverIp + '/friend/changepraseActivity.do',
                            method: 'post',
                            data: {
                                values: {
                                    type: ptype,
                                    activityoid: me.activities[index].oid,
                                    userId: USER.userId
                                }
                            }
                        }, function (ret, err) {
                            if (ret) {}
                        });
                        ptype = "0";
                        zancount = Number(me.activities[index].parsecount)
                        me.activities[index].parsecount = zancount - 1;
                    }
                    // console.log(ev.currentTarget.style.color);
                },


                //收藏
                store: function (ev, index) {
                    var me = this;
                    if (ev.currentTarget.style.color != 'red') {
                        stype = "0";
                        ev.currentTarget.style = "color:red";
                        api.ajax({
                            url: serverIp + '/friend/changestoreActivity.do',
                            method: 'post',
                            data: {
                                values: {
                                    type: stype,
                                    activityoid: me.activities[index].oid,
                                    userId: USER.userId
                                }
                            }
                        }, function (ret, err) {
                            if (ret) {}
                        });
                        stype = "1";
                        scount = Number(me.activities[index].storecount)
                        me.activities[index].storecount = scount + 1;
                    } else {
                        ev.currentTarget.style = "color:#757575";
                        api.ajax({
                            url: serverIp + '/friend/changestoreActivity.do',
                            method: 'post',
                            data: {
                                values: {
                                    type: stype,
                                    activityoid: me.activities[index].oid,
                                    userId: USER.userId
                                }
                            }
                        }, function (ret, err) {
                            if (ret) {}
                        });
                        stype = "0";
                        scount = Number(me.activities[index].storecount)
                        me.activities[index].storecount = scount - 1;
                    }

                },
                animation: function () {
                    var me = this;
                    setInterval(function () {
                        me.textindex = (me.textindex + 1) % me.length;
                        me.textmsg = me.textmsgs[me.textindex];
                    }, 10000)
                },
                //评论
                comment: function (index) {
                    var me = this;
                    if (cclickcount == 0) {
                        me.commentcount++;
                        cclickcount = 1;
                    } else if (cclickcount == 1) {
                        me.commentcount--;
                        cclickcount = 0;
                    }
                },
                get: function () {
                    var me = this;
                    if (me.ifcount == 8) {
                        api.showProgress({
                            style: 'default',
                            title: '努力加载中...',
                            text: '先喝杯茶...',
                            modal: false
                        });
                    }
                    api.ajax({
                        url: serverIp + '/friend/listTActivity.do',
                        method: "post",
                        data: {
                            values: {
                                count: me.count
                            }
                        }
                    }, function (ret, err) {
                        if (ret) {
                            // console.log(JSON.stringify(ret));
                            me.ifcount = ret.length;
                            if (ret.length < 8) {
                                api.hideProgress();
                            }
                            for (i = 0; i < ret.length; i++) {
                                var imagearray = ret[i].imagePaths.split(',');
                                ret[i].imagearray = imagearray;
                                ret[i].time = ret[i].time.substring(5, 10);
                                me.activities.push(ret[i]);
                                if (me.count < 8) {
                                    if (i < 4) {
                                        imageList.push(imagearray[0]);
                                    }
                                }
                            }
                            openBroadcast(imageList);
                            api.setPrefs({
                                key: 'activities',
                                value: me.activities
                            });
                            api.hideProgress();
                        }
                    });
                }


            },
            created: function () {
                var me = this;
                me.get();
                $api.get(serverIp + '/info/listNews.do', function (ret, err) {
                    if (ret) {
                        me.length = ret.result.length;
                        if (ret.result.length > 0) {
                            for (i = 0; i < ret.result.length; i++) {
                                me.notice.push(ret.result[i]);
                                console.log(me.notice[i].subject);
                                me.textmsgs.push(me.notice[i].subject);
                            }
                            me.textmsg = me.notice[0].subject;
                            console.log(me.textmsgs);
                            api.setPrefs({
                                key: 'notices',
                                value: me.notice
                            });
                        }
                    }
                }, 'JSON');

                me.redif.length = me.activities.length;
                for (index in me.redif) {
                    me.redif[index] = me.activities[index].praseif;
                }
                me.animation();
            }
        });

        //上拉加载
        api.addEventListener({
            name: 'scrolltobottom',
        }, function (ret, err) {
            if (vm.ifcount == 8) {
                vm.count = vm.count + 8;
                vm.get();
            }
        });

    };

    function currentFun(index) {
        console.log(index);
    }

    function openBroadcast(imageList) {
        var UIScrollPromptView = api.require('UIScrollPromptView');
        var length = imageList.length;
        var newimageList = imageList.slice(0, 4);
        UIScrollPromptView.open({
            rect: {
                x: api.winWidth * (0.025),
                y: 0,
                w: api.winWidth * (0.95),
                h: api.winHeight / 3 - 10
            },
            data: {
                paths: newimageList
            },
            styles: {
                caption: {
                    height: 35,
                    color: '#E0FFFF',
                    size: 13,
                    bgColor: '#696969',
                    position: 'bottom',
                    alignment: 'center'
                },
                indicator: {
                    align: 'center',
                    color: '#FFFFFF',
                    activeColor: '#DA70D6'
                },
                prompt: {
                    button: {
                        normal: 'widget://image/btn_normal.png',
                        highlight: 'widget://image/btn_highlight.png',
                        x: 0,
                        y: 100,
                        w: 60,
                        h: 40
                    },
                    x: 0,
                    y: 50,
                    w: 160,
                    h: 90,
                    contentMode: 'scaleToFill',
                    animation: true
                }
            },
            auto: true,
            placeholderImg: 'widget://res/slide1.jpg',
            contentMode: 'scaleToFill',
            interval: 4,
            fixedOn: api.frameName,
            loop: true,
            fixed: false
        }, function (ret) {
            if (ret) {
                if (ret.eventType == "click") {
                    console.log(ret.index);
                    vm.changetoac(ret.index);
                }
            }
        });
    }
</script>

</html>